import dayjs from 'dayjs';
import router from '@system.router';
import { statEventLog } from '../../service';

const colors = ['#f7ce00', '#f99b11', '#f76223', '#f2400a', '#f772ac', '#e65392', '#a575eb', '#a12df7', '#7b79f7', '#4b48f7', '#4b8af3', '#007dff', '#73c1e6', '#4fb4e3', '#a5d61d', '#69d14f', '#a2a2b0', '#8e8e93']
function getColor(color, inx) {
    if (color) return color;
    if (inx >= colors.length) {
        return colors[Math.round(inx % colors.length)]
    }
    return colors[inx]
}

const h = 60 * 60
const mim = 60
function num2time(num) {
    let n = parseInt(num)
    if (isNaN(n)) return
    let str = ''
    let hour = 0
    let minute = 0
    let second = 0
    if (n > h) {
        hour = Math.round(n / h)
        n = Math.round(n % h)
    }
    if (n > mim) {
        minute = Math.round(n / mim)
        n = Math.round(n % mim)
    }
    second = n
    if (hour) {
        str += hour + '时'
    }
    if (minute) {
        str += minute + '分'
    }
    str += second + '秒'
    return str
}

export default {
    data: {
        loading: false,
        date: null,
        list: [],
        segments: [],
    },
    onInit() {
        this.date = dayjs().format("YYYY-MM-DD");
        this.statEventLog()
    },
    selectDate() {
        this.$element("datePicker").show();
    },
    dateChange(e) {
        this.date = dayjs(e.year + "-" + (e.month + 1) + "-" + e.day).format("YYYY-MM-DD");
        this.statEventLog()
    },
    back() {
        router.back()
    },
    async statEventLog() {
        if (this.loading) return
        this.loading = true;
        this.segments = []
        this.list = []
        const startAt = dayjs(this.date);
        const list = await statEventLog({
            startAt: startAt.format("YYYY-MM-DD HH:mm:ss"),
            endAt: startAt.add(1, "day").format("YYYY-MM-DD HH:mm:ss")
        });
        this.list = list.map((item, inx) => ({ ...item, time: num2time(item.total), color: getColor(item.color, inx) }));
        this.segments = this.list.map(({ name, value, color }) => ({ name, value, startColor: color, endColor: color }))
        this.loading = false;
    }
}
